<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>小区门禁管理系统</title>
    <link rel="icon" th:href="@{/img/favicon.ico}"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta th:include="common/commons :: login"/>
    <style>
        #img {
            width: 25px;
            height: 20px;
            position: absolute;
            z-index: 10;
            right: 5px;
            margin-top: 5px;
            top: 1px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="particles-js">
    <div class="login">
        <div class="login-top">小区门禁管理系统</div>
        <form>
            <div class="login-center clearfix">
                <div class="login-center-img">
                    <img th:src="@{/img/name.png}"/>
                </div>
                <div class="login-center-input">
                    <input type="text" name="username" id="username" placeholder="请输入您的用户名"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img">
                    <img th:src="@{/img/password.png}"/>
                </div>
                <div class="login-center-input">
                    <input type="password" name="password" id="password" placeholder="请输入您的密码"
                           onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
                    <img id="img"
                         onmousedown="hideShowPsw('show')"
                         onmouseup="hideShowPsw('hide')"
                         th:src=" @{/img/visible.png}">
                </div>
                <button type="submit" class="login-button" lay-submit lay-filter="login">登录</button>
            </div>
        </form>
    </div>
    <div class="sk-rotating-plane"></div>
</div>

<script type="text/javascript" th:src="@{/js/common/particles.min.js}"></script>
<script type="text/javascript" th:src="@{/js/common/app.js}"></script>
<script type="text/javascript" th:inline="javascript">
    /* <![CDATA[ */
    $(function () {
        layui.use('form', function () {
            const form = layui.form;
            //监听提交
            form.on('submit(login)', function () {
                if (check()) {
                    const $ = layui.jquery;
                    const requestBody = {'userName': $("#username").val(), 'password': encrypt()};
                    $.ajax({
                        url: ctx + '/user/login',
                        type: 'post',
                        data: JSON.stringify(requestBody),
                        contentType: "application/json;charset=utf-8",
                        success: function (data) {
                            if (data.code == 200) {
                                window.location.href = ctx + '/page/index'
                            } else {
                                msg.error("用户名或密码错误");
                            }
                        }
                    });
                }
                return false; //阻止表单跳转
            });
        });
    });

    function check() {
        const username = $("#username").val();
        const UserPWD = $("#password").val();
        if (username == null || username == '') {
            msg.error("用户名不能为空");
            return false;
        }
        if (UserPWD == null || UserPWD == '') {
            msg.error("密码不能为空");
            return false;
        }
        return true;
    }

    //显示隐藏密码
    function hideShowPsw(arg) {
        const PWD = $('#password');
        const demoImg = $('#img');
        if (arg == "show") {
            PWD.attr('type', 'text');
            demoImg.attr('src', ctx + '/img/invisible.png')// 图片路径（闭眼图片）
        } else {
            PWD.attr('type', 'password');
            demoImg.attr('src', ctx + '/img/visible.png')// 图片路径（睁眼图片）
        }
    }

    //加密
    function encrypt() {
        let content = "MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAI5PR7V/aLlr1Hz4N2o4RJyCyVeb/TlFIEFCUUKoKWKSfVcWF4TcqSNUuH9nNftJV5iEYPGwoi6FzhDIxBUQ0+MCAwEAAQ\\=\\=";
        let pk = "-----BEGIN PUBLIC KEY-----\n" + content + "-----END PUBLIC KEY-----";
        let pub = KEYUTIL.getKey(pk);
        let source = $("#password").val();
        return KJUR.crypto.Cipher.encrypt(source, pub);
    }

    /* ]]> */
</script>
</body>
</html>
